Skip to content

feat(react-icons-atomic-webpack-loader): reroute SVG-only color icons off font variants#1137

Merged
Hotell merged 1 commit into
microsoft:mainfrom
Hotell:feat/atomic-loader-color-fallback
Jul 3, 2026
Merged

feat(react-icons-atomic-webpack-loader): reroute SVG-only color icons off font variants#1137
Hotell merged 1 commit into
microsoft:mainfrom
Hotell:feat/atomic-loader-color-fallback

Conversation

@Hotell

@Hotell Hotell commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

Summary

Color variants (*Color) are SVG-only — their gradients cannot be represented in an icon font, so the font builds ship no color glyphs. Before this change, importing a Color icon under iconVariant: 'fonts' rewrote it to a nonexistent /fonts/<icon> atom, producing a broken import (export 'AddCircleColor' was not found).

The atomic loader now resolves variants per specifier and reroutes Color imports off color-less variants, so they always land on a build that actually ships color atoms.

Behavior

For a *Color import, the resolved variant follows the same iconVariant → fallbackVariant → svg precedence as module-level resolution, constrained to color-capable variants (svg, svg-sprite):

iconVariant fallbackVariant AddCircleColor resolves to
fonts unset svg (warning)
fonts svg-sprite svg-sprite (warning)
fonts fonts svg (warning)
svg-sprite svg-sprite (unchanged)
svg svg (unchanged)
  • Rerouting is per specifier, so import { AddFilled, AddCircleColor } under fonts splits into /fonts/add + /svg/add-circle.
  • Headless-ness is preserved — the headless svg build also ships color atoms, so headless + fonts routes Color icons to /headless/svg/<icon>.
  • svg-sprite already supports color, so those imports are left untouched.

Implementation

  • Added a colorVariants field to ModuleDescriptor (parallels headlessVariants): react-icons → ['svg', 'svg-sprite'], react-brand-icons → ['svg'].
  • Added resolveColorVariant() policy and isColorIconName() (derived from the canonical suffix regex).
  • transform.ts now resolves per specifier with a ${module}:${isColor} cache key and dedupes diagnostics by message.

Tests & docs

  • 10 new unit cases + color-fonts-imports and color-headless-fonts-imports webpack integration fixtures.
  • README gains a Color icons section and a Mermaid resolution-flow diagram.
  • All 49 unit tests + 15 integration fixtures pass; build and prettier are clean.

… off font variants

Color variants (*Color) are SVG-only because their gradients cannot be
represented in an icon font, so the font builds ship no color glyphs.
Previously, importing a Color icon under iconVariant: 'fonts' rewrote it to a
nonexistent /fonts/<icon> atom, breaking the build.

The loader now resolves variants per specifier and reroutes Color imports off
color-less variants using the iconVariant -> fallbackVariant -> svg precedence,
constrained to color-capable variants (svg, svg-sprite). Headless-ness is
preserved, since the headless svg build also ships color atoms. Non-color
siblings in the same import statement are unaffected.

Adds a colorVariants descriptor field and resolveColorVariant policy, unit
tests, and svg/headless webpack integration fixtures. Documents the behavior
with a resolution-flow diagram in the README.
@github-actions

github-actions Bot commented Jul 2, 2026

Copy link
Copy Markdown

📋 PR Validation Summary

Check the Build react library job summary for detailed reports:

  • 📦 Bundle Size — size comparison against the base branch

To view: click the link above → select the Build react library job → open the Summary tab.

@Hotell Hotell marked this pull request as ready for review July 2, 2026 15:44
@Hotell Hotell requested a review from a team as a code owner July 2, 2026 15:44
@Hotell Hotell merged commit a04a179 into microsoft:main Jul 3, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants